<template>
  <div class="replace-box">
    <iu-header>
      <template #left>
        <x-icon
          @click="back"
          type="ios-arrow-back"
          size="21"
          fill="#fff"
        ></x-icon>
      </template>
      <!-- <template #title>隐患{{ isAbarbeitung ? "整改" : "验收" }}</template> -->
      <template #title>{{ detail.checkPoint }}</template>
      <template #right>
       <div v-focusable  @click="backToHomepage">
          <iconSvg name="home" w="20px" h="22px" class="right_icon"></iconSvg>
        </div>
      </template>
    </iu-header>
    <div class="content">
      <div class="cate-nfo">
        <!-- <div class="info-list">
          <div style="font-size:16px; color: #fff;">
            {{ detail.checkPoint }}
          </div>
        </div> -->
        <template v-if="isAbarbeitung">
          <div class="info-list">
            <div class="contentList full">
              <div class="contentLeft">
                <span class="notNull">*</span>
                <span class="contentLeftFont">整改描述</span>
              </div>
              <div class="contentRight">
                <textarea
                  name="userQuestion"
                  v-model="handleForm.description"
                  placeholder="请输入描述"
                  class="userQuestion"
                  maxlength="100"
                ></textarea>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="info-list">
            <div class="contentList full">
              <div class="contentLeft">
                <span class="notNull">*</span>
                <span class="contentLeftFont">检查结果</span>
              </div>
              <div class="contentRight">
                <div class="produce-data-list-read">
                  <checker
                    v-model="handleForm.acceptanceStatus"
                    radio-required
                    default-item-class="read-item"
                    selected-item-class="read-item-selected"
                  >
                    <checker-item :value="1">合格</checker-item>
                    <checker-item :value="2">不合格</checker-item>
                  </checker>
                </div>
              </div>
            </div>
            <div class="contentList full">
              <div class="contentLeft">
                <span class="notNull">*</span>
                <span class="contentLeftFont">验收描述</span>
              </div>
              <div class="contentRight">
                <textarea
                  name="userQuestion"
                  v-model="handleForm.description"
                  placeholder="请输入描述"
                  class="userQuestion"
                  maxlength="100"
                ></textarea>
              </div>
            </div>
          </div>
        </template>
        <div class="info-list">
          <div class="contentList upload">
            <div class="contentLeft">
              <span class="notNull" v-if="isAbarbeitung">*</span>
              <span class="contentLeftFont">拍照取证：</span>
            </div>
            <div class="contentRight cancelPos">
              <upload
                :file-list="fileList"
                :loading="loading"
                :max-count="10"
                :max-size="10 * 1024 * 1024"
                @oversize="oversize"
                @overcount="overcount"
                :file-stream="true"
                @delete="deleteList"
                @afterRead="afterRead"
              ></upload>
            </div>
          </div>
        </div>
      </div>
      <div class="contentList">
        <button type="button" class="subBtn" @click="cancel">取消</button>
        <button type="button" class="subBtn" @click="eventSubmit">
          提交
        </button>
      </div>
    </div>
    <confirm
      class="deviceDetailManage"
      v-model="confirmShow"
      title="提示"
      :close-on-confirm="false"
      @on-cancel="confirmShow = false"
      @on-confirm="handleSubmit"
    >
      <p style="text-align:center;" v-if="isAbarbeitung">
        确定要申请验收吗？
      </p>
      <p style="text-align:center;" v-else>
        是否验收{{ handleForm.acceptanceStatus === 1 ? "通过" : "不通过" }}吗。
      </p>
    </confirm>
  </div>
</template>
<script>
import iuHeader from "@/components/common/header/index";
import FileUpload from "@/daos/file_upload";
import SafetyManageDao from "@/daos/safety_manage_dao";
import upload from "@/components/common/upload/upload";
import dayjs from "dayjs";
import { Checker, CheckerItem, Confirm } from "vux";
export default {
  components: {
    iuHeader,
    Checker,
    CheckerItem,
    Confirm,
    upload
  },
  data() {
    return {
      userQuestion: "",
      status: 0,
      result: 0,
      departmentName: "",
      url: "",
      fileList: [],
      loading: false,
      confirmShow: false,
      id: 0,
      edit: false,
      handleForm: {
        acceptanceStatus: "",
        checkTroubleId: 0,
        description: "",
        id: 0,
        operator: 0,
        operatorTime: "",
        pictures: "",
        type: ""
      }
    };
  },
  //返回首页的公共方法
  inject: ["backToHomepage"],
  created() {
    this.id = this.$route.query.id || 0;
    if (!this.user) {
      this.getUserInfo();
    }
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
    detail() {
      return this.$store.state.safetyCheck.trouble;
    },
    isAbarbeitung() {
      return this.detail.status == 1 || this.detail.status == 5;
    }
  },
  methods: {
    recovery() {
      window.scroll(0, 0);
    },
    back() {
      this.$router.go(-1);
    },
    initEdit() {
      if (this.id) {
        this.edit = true;
        this.getOutboundOrderDetails(this.id);
      }
    },
    getUserInfo() {
      this.$http(this.$API.getUserInfo, {}).then(res => {
        this.$store.commit("saveUser", res);
      });
    },
    cancel() {
      this.back();
    },
    onCancel() {
      this.showConfirm = false;
    },
    eventSubmit() {
      let text = "";
      if (!this.handleForm.description) {
        text = "请输入描述";
      }
      if (this.isAbarbeitung && !this.fileList.length) {
        text = "请上传图片";
      }
      if (!this.isAbarbeitung && !this.handleForm.acceptanceStatus) {
        text = "请选择验收结果";
      }
      if (text) {
        this.$vux.toast.show({ text, type: "warn" });
        return;
      }
      this.confirmShow = true
      // this.handleSubmit();
    },
    handleSubmit() {
      this.handleForm.type = !this.isAbarbeitung ? 2 : 1;
      this.handleForm.checkTroubleId = this.detail.id;
      this.handleForm.operator = this.user.id;
      this.handleForm.operatorTime = dayjs();
      this.handleForm.pictures = this.fileList.join(",");
      SafetyManageDao.postCheckTroubleHandle(this.handleForm, res => {
        this.$vux.toast.show({ text: "保存成功！", type: "success" });
        this.back();
      });
    },
    oversize() {
      this.$vux.toast.text("文件大小请不要超过5MB。");
    },
    overcount() {
      this.$vux.toast.text("文件个数请小于10个。");
    },
    deleteList(index) {
      this.fileList.splice(index, 1);
    },
    afterRead(files) {
      let formData = new FormData();
      formData.append("file", files);
      this.loading = true;
      FileUpload.upload(
        formData,
        res => {
          // console.log(res);
          this.loading = false;
          this.fileList.push(res);
        },
        err => {
          this.loading = false;
          this.$vux.toast.text(err);
        }
      );
    }
  }
};
</script>
<style lang="less">
.replace-box {
  .vux-x-switch.weui-cell_switch {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .vux-tap-active:active {
    background: none;
  }
}
</style>
<style lang="less" scoped>
textarea::-webkit-input-placeholder {
  color: rgb(111, 111, 119) !important;
}
textarea:-moz-placeholder  {
  color: rgb(111, 111, 119) !important;
}

textarea::-moz-placeholder  {
  color: rgb(111, 111, 119) !important;
}
textarea:-ms-input-placeholder  {
  color: rgb(111, 111, 119) !important;
}

input {
  &::placeholder {
    font-size: 14px;
    color: gray !important;
  }
}
* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: none;
}
html,
body {
  width: 100%;
}
.replace-box {
  width: 100%;
  min-height: 100vh;
  height: auto;
  background-color: #18182c;
}
.backHistory {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); /* IE 9 */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
  -o-transform: rotate(90deg);
  line-height: 40px;
  font-size: 25px !important;
  margin-left: 10px;
}
.pageTop {
  height: 40px;
  color: #fff;
  position: fixed;
  height: 40px;
  width: 100%;
  left: 0px;
  top: 0px;
  background-color: #22233f;
  z-index: 9;
  .sellWorkOrder_header_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
  }
}
.content {
  width: 100%;
  height: 100%;
  // overflow-y: auto;
  padding: 0 8px 20px;
  box-sizing: border-box;
  background-color: #18182c;
}

.cate-nfo {
  height: auto;
  // min-height: calc(~"100vh" - 80px);
  padding-bottom: 8px;
  border-radius: 8px;
  background-color: #18182c;
  .info-list {
    background: #22233f;
    padding: 8px;
    margin: 8px 0;
    // min-height: 260px;
    .info-list-item {
      display: flex;
      flex-wrap: wrap;
      margin: 8px 0;
    }
    .info-title {
      color: rgba(255, 255, 255, 0.5);
      font-size: 16px;
      // margin-right: 30px;
      width: 100px;
      text-align: right;
    }

    .info-value {
      flex: 1;
      font-size: 16px;
      color: #fff;

      .status1,
      .status4 {
        color: #4fa8e7;
      }
      .status3 {
        color: #456de6;
      }
      .status5,
      .status7,
      .status11 {
        color: #dd9710;
      }
      img {
        max-width: 100px;
        height: auto;
        margin-bottom: 8px;
        margin-right: 8px;
      }
    }
    .modify-btn {
      font-size: 14px;
      margin-left: 8px;
      color: gray;
    }
    .warning {
      color: #ff2c2c;
    }
    .modify {
      font-size: 16px;
      padding: 8px;
      color: rgba(255, 255, 255, 0.5);
    }
  }
}
.contentList {
  padding: 8px 0;
  overflow: hidden;
  // border-bottom: 1px solid #464656;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  &.full {
    flex-wrap: wrap;
    .contentRight {
      width: 100%;
      margin-top: 3px;
    }
  }
  -webkit-text-size-adjust: 100% !important;
  .err-msg {
    flex: none;
    width: 100%;
    color: #ff2c2c;
    font-size: 12px !important;
    padding-left: 35%;
    -webkit-text-size-adjust: 100% !important;
  }
}

.upload {
  display: flex;
  flex-direction: column;
  // align-items: center;
  justify-content: space-between;
}
.contentLeft,
.contentRight {
  font-size: 17px;
}
.contentLeft {
  color: #ffffff;
  flex: none;
}
.contentRight {
  position: relative;
  color: #fff;
  box-sizing: border-box;
  // margin-top: 3px;
  width: 65%;
  // display: flex;
  // justify-content: flex-end;
  //   .iu-check {
  //     display: flex;
  //     .iu-check-box {
  //         padding: 6px;

  //     }
  //   }

  .produce-data-list-read {
    padding: 8px 0;
    .read-item {
      border: 1px solid #777;
      padding: 5px 15px;
    }
    .read-item-selected {
      border: 1px solid #177fff;
    }
  }
  &.border {
    border-bottom: 0.026667rem solid #464656;
    display: flex;
    justify-content: space-between;
  }
  input {
    // text-align: right;
    touch-action: none;
    width: 86%;
    border: 0;
    color: #ffffff;
    font-size: 16px;
    margin-right: 4px;
    &.full {
      width: 100%;
    }
  }
}
.cancelPos {
  position: static;
  width: auto !important;
}
.notNull {
  color: #d81e06;
}

.userQuestion {
  font-size: 17px;
  width: 100%;
  height: 100px;
  border-radius: 6px;
  padding: 10px;
  box-sizing: border-box;
  background-color: transparent;
  border: 1px solid #747480;
  color: #fff;
  text-align: left !important;
}
.userQuestion::-webkit-input-placeholder {
  color: #6f6f77;
  text-align: left;
}
.subBtn {
  width: 40%;
  height: 40px;
  line-height: 1;
  padding: 13px 0;
  box-sizing: border-box;
  text-align: center;
  margin: 0 auto;
  border-radius: 13px;
  background-color: #456de6;
  color: #ffffff;
  margin: 0 4%;
  font-size: 17px;
  margin-top: 0;
  &.is-edited {
    color: #d2d2d2;
    background-color: gray;
  }
}
.iu-select {
  height: 26px;
  width: 100%;
  padding: 2px 4px 3px;
  border: none;
  outline: none;
  border: 1px solid #eee;
  border-radius: 2px;
  font-size: 14px;
  color: #fff;
  background: transparent;
  option {
    color: #000;
    background: rgba(255, 255, 255, 0.9);
  }
  &:invalid {
    color: #999;
  }
}
</style>
